<!--
 * @Author: [you name]
 * @Date: 2021-11-05 10:59:01
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-06 01:12:03
 * @Description: 
-->
<template>
  <div class="custome">
    <!-- 查找区域 -->
    <div class="found">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-input
            v-model="queryParams.orderId"
            clearable
            placeholder="请输入订单编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择状态"
          >
            <!-- <el-option label="未审核" value="未审核"></el-option> -->
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="pageQueryOrder">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"> </el-table-column>
      <el-table-column prop="id" label="评论人编号" width="180">
      </el-table-column>
      <el-table-column prop="customerId" label="顾客编号"> </el-table-column>
      <el-table-column prop="commentTime" label="评论时间"> </el-table-column>
      <el-table-column prop="comment" label="评论内容"> </el-table-column>
      
      <el-table-column label="状态" prop="status" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '通过'" type="success">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else-if="scope.row.status === '未通过'" type="danger">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else type="info">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
     <el-table-column label="操作" align="center" v-slot="scope">
        <el-button
          type="text"
          v-if="scope.row.status == '通过' "
          @click="toDeleteHandler(scope.row.id)"
          style="color: #e65d6e"
          >删除</el-button
        >
        <span v-else>
              <el-button @click="passHandler(scope.row.id, $even)" type="text"
                >通过</el-button
              >
              <el-button @click="passHandler(scope.row.id, $even)" type="text"
                >不通过</el-button
              >
            </span>
      </el-table-column>
    </el-table>

    <!-- 分页查询 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="tableData.size"
      layout="total, sizes, prev, pager, next"
      :total="tableData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      tableData: {},
      queryParams: {
        page: 1,
        pageSize: 10,
      },
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
         value1: '',
         value2: ''
    };
  },
  
  methods: {
    
    // 分页查询顾客账单信息
    pageQueryOrder() {
      // 过滤查询参数，将空字符串的键值对删除掉
      for (let key in this.queryParams) {
        if (this.queryParams[key] == "") {
          delete this.queryParams[key];
        }
      }
    //   console.log(this.queryParams);
      request
        .get("/orderComment/pageQuery", {
          params: this.queryParams,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    // 分页size-change事件
    handleSizeChange(pageSize) {
      // 点击分页容量，将最新的pageSize设置到数据模板
      this.queryParams.pageSize = pageSize;
      // 重新调用分页查询的方法，做数据重载
      this.pageQueryOrder();
    },
    // 分页current-change事件
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.pageQueryOrder();
    },
    // 删除事件
    toDeleteHandler(id) {
      // 点击删除按钮弹出提示框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //   根据路由/baseUser/deleteById 的id删除信息
        request
          .get("/orderComment/deleteById", {
            params: {
              id,
            },
          })
          .then((res) => {
            //   重载数据
            this.pageQueryOrder();
            this.$message({
              message: res.message,
              type: "success",
            });
          });
      });
    },
    // 审核事件
    passHandler(id, e) {
      if (e.target.innerText == "通过") {
        this.$confirm("此操作将通过该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          request
            .get("/orderComment/checkPass", {
              params: { id },
            })
            .then((res) => {
              // 重载数据
              this.pageQueryAttestation();
              // 提示成功操作的信息
              this.$message({
                message: res.message,
                type: "success",
              });
            });
        });
      } else {
        this.$confirm("此操作将不通过该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          request
            .get("/orderComment/checkNoPass", {
              params: { id },
            })
            .then((res) => {
              // 重载数据
              this.pageQueryOrder();
              // 提示成功操作的信息
              this.$message({
                message: res.message,
                type: "success",
              });
            });
        });
      }
    },
  },
  created() {
    this.pageQueryOrder(); //分页查询顾客账单
    
  },
};
</script>

<style>
</style>